<template>
  <div class="article-list">
    <van-pull-refresh
      v-model="isreFreshLoading"
      :success-text="refreshSuccessText"
      :success-duration="1500"
    >
      <!-- @refresh="onRefresh" -->

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <article-item
          v-for="(article, index) in list"
          :key="index"
          :article="article"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleListById } from "../../../api/home";
import ArticleItem from "./article-item";

export default {
  props: {
    channel: {
      type: Object,
      required: true,
    },
  },
  components: {
    ArticleItem,
  },
  data() {
    return {
      list: [], // 存储列表数据的数组
      loading: false, // 控制加载中 loading 状态
      finished: false, // 控制数据加载结束的状态
      timestamp: null, // 请求获取下一页数据的时间戳
      error: false, // 控制列表加载失败的提示状态
      isreFreshLoading: false, // 控制下拉刷新的 loading 状态
      refreshSuccessText: "刷新成功", // 下拉刷新成功提示文本
    };
  },
  created() {},
  methods: {
    async onLoad() {
      try {
        const res = await getArticleListById(this.channel.id);
        this.list.push(...res);
        console.log(this.list);
        this.loading = false;
        this.finished = true;
      } catch (error) {
        // 展示错误提示状态
        this.error = true;

        // 请求失败了，loading 也需要关闭
        this.loading = false;
      }
    },
  },
};
</script>
<style lang='less' scoped>
</style>